import { Card, Form, Input, Button, message } from 'antd';

export default function UserRegister() {
  const [form] = Form.useForm();

  // 密码强度正则：至少8位，包含大小写字母、数字和特殊字符
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  interface RegisterFormValues {
    username: string;
    email: string;
    password: string;
  }
  
  // 明确指定 values 的类型
  const onFinish = (values: RegisterFormValues) => {
      console.log('注册信息:', values);
      message.success('注册信息验证通过');
    };

  return (
    <Card title="用户注册" style={{ maxWidth: 600, margin: '24px auto' }}>
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        validateTrigger="onBlur"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            { required: true, message: '请输入用户名' },
            { pattern: /^\w{4,20}$/, message: '用户名需4-20位字母数字组合' }
          ]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[
            { required: true, message: '请输入邮箱' },
            {
              pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
              message: '邮箱格式不正确'
            }
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            { required: true, message: '请输入密码' },
            {
              validator: (_, value) =>
                passwordRegex.test(value)
                  ? Promise.resolve()
                  : Promise.reject('密码需至少8位，包含大小写字母、数字和特殊字符')
            }
          ]}
        >
          <Input.Password placeholder="请输入密码" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            立即注册
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}